<template>
  <div class="profile-container">
    <div class="top-title-group">新增角色信息</div>
    <div class="middle-form-group">
      <el-form
        ref="profileForm"
        :model="profileForm"
        :rules="rules"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input style="width:400px" v-model="profileForm.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            :rows="5"
            type="textarea"
            style="width:400px"
            v-model="profileForm.roleDesc"
            placeholder="请输入角色描述"
          ></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <div class="password-title-style"></div>
        <div class="card-style">
          <div class="card-head-style">
            <el-checkbox
              :indeterminate="isIndeterminate1"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >首页</el-checkbox>
          </div>
          <div class="card-body-style">
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedpages1" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="page in homepage" :label="page" :key="page">{{page}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="password-title-style"></div>
        <div class="card-style">
          <div class="card-head-style">
            <el-checkbox
              :indeterminate="isIndeterminate2"
              v-model="checkAll2"
              @change="handleCheckAllChange2"
            >客户管理</el-checkbox>
          </div>
          <div class="card-body-style">
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedpages2" @change="handleCheckedCitiesChange2">
              <el-checkbox v-for="cs in css" :label="cs" :key="cs">{{cs}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="password-title-style"></div>
        <el-form-item>
          <el-button @click="back()">取消并返回</el-button>
          <el-button type="primary" :loading="isLoading" @click="handleSaveRole('profileForm')">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
const cssOptions = [
  "新增客户",
  "删除客户",
  "编辑客户",
  "查看客户详情",
  "创建工单",
  "导出客户数据",
  "拉黑客户"
];
const homepageOptions = ["数据概况", "访问量统计", "快捷入口", "客服监控"];
import api from "@/api/api";
export default {
  name: "SettingRoleDetail",
  data() {
    return {
      checkAll: false,
      checkedpages1: [],
      checkedpages2: [],
      checkAll2: false,
      homepage: homepageOptions,
      css: cssOptions,
      isIndeterminate1: true,
      isIndeterminate2: true,
      imageUrl: "",
      type: "",
      profileForm: {},
      rules: {
        roleName: {
          required: true,
          message: "请输入角色名称",
          trigger: ["blur", "change"]
        }
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleCheckAllChange(val) {
      this.checkedpages1 = val ? homepageOptions : [];
      this.isIndeterminate1 = false;
    },
    handleCheckAllChange2(val) {
      this.checkedpages2 = val ? cssOptions : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.homepage.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.homepage.length;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.css.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.css.length;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleSaveRole(formName) {
      this.isLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.type == "update") {
            api.updateRoleAPI(this.profileForm).then(res => {
              this.isLoading = false;
              let { error, data } = res.data;
              if (error) {
                this.$message.error(data);
              } else {
                this.$message({
                  message: "角色信息修改成功",
                  type: "success"
                });
                this.$router.push("/setting/role-management");
              }
            });
          } else {
            api.createRoleAPI(this.profileForm).then(res => {
              this.isLoading = false;
              let { error, data } = res.data;
              if (error) {
                this.$message.error(data);
              } else {
                this.$message({
                  message: "创建角色成功",
                  type: "success"
                });
                this.$router.push("/setting/role-management");
              }
            });
          }
        } else {
          this.$message({
            message: "表单填写错误",
            type: "warning"
          });
        }
      });
    },
    back() {
      this.$router.push("/setting/role-management");
    }
  },
  created() {
    this.profileForm = this.$route.params.data;
    this.type = this.$route.params.type;
  },
  mounted() {}
};
</script>

<style scoped>
.card-style {
  border: 1px;
}
.card-head-style {
  background-color: #e6f1ff;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
}
.card-body-style {
  padding-left: 10px;
}
.profile-container {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.middle-form-group {
  padding-left: 60px;
}
.upload-item-group {
  display: flex;
  align-items: center;
}
.upload-msg-style {
  color: #cccccc;
}
.top-title-group {
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
